<template>
	<LogLoginSearch v-model="search" @search-click="page = 1; queryLogs()"/>
	<Table border :columns="columns" :data="data">

    <template #status="{ row, index }">
      <DotTag type="primary" v-if="row.state">成功</DotTag>
      <DotTag type="error" v-else>失败</DotTag>
    </template>

		<template #footer>
			<div style="min-width: 300px; max-width: 380px;">
				<van-pagination v-model="page" :total-items="total" 
						:items-per-page="pageSize" @page-click="queryLogs"
						:show-page-size="5" force-ellipses />
			</div>
		</template>
	</Table>
</template>

<script>

import VanPagination from '../components/VanPagination.vue'
import LogLoginSearch from '../components/log/LogLoginSearch.vue'
import DotTag from "../components/DotTag.vue";

export default {
	data () {
		return {
			page: 1, 
			total: 0,
			pageSize: 12,
      search: {} ,
			columns: [
				 {
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					title: '登录人员',
					key: 'user',
          width: 150,
				},
				{
					title: '登录时间',
					key: 'createTime',
          width: 180,
				},
        {
          title: '操作系统',
          key: 'osName',
          width: 180,
        },
        {
          title: '浏览器',
          key: 'browserName',
          width: 200,
        },
				{
					title: 'IP地址',
					key: 'ip',
          width: 140,
				},
				{
					title: '登录地点',
					key: 'address',
          width: 200,
				},
        {
          title: '状态',
          slot: 'status',
          width: 100,
        },
        {
          title: '失败原因',
          key: 'reason'
        },
			],
			data: [],
			
		}
	},
  created() {
     this.queryLogs();
  },
  methods: {
    queryLogs() {
       this.$api.querySignLogs(this.page, this.pageSize, this.search).then(ret=> {
          if (ret.data.status) {
             this.data = ret.data.data.list ;
             this.total = ret.data.data.total ;
          }
       })
    }
  },
	components: {
		VanPagination,
		LogLoginSearch,
    DotTag
	}
	
}
</script>

<style>
</style>